<template>
  <div>
    <el-card :body-style="{ padding: '30px' }" shadow="never">
      <el-divider content-position="left">前端左侧菜单以及页面按钮权限</el-divider>

      <div class="pb-4 ">
        <el-button size="small" plain @click="fetchData()"> <i class="el-icon-refresh-left"></i> 刷新</el-button>
        <perbtn @click="showModel('add')" type="primary" plain perms="menu:add"><i class="el-icon-plus"></i> 添加数据</perbtn>
        <perbtn @click="exportExcel" type="warning" plain perms="menu:export">
          <i class="el-icon-download"></i> 导出数据</perbtn>
      </div>
      <el-table border stripe row-key="id" :data="tableData" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="menuName" label="菜单名称" align="center" />
        <el-table-column prop="menuType" label="菜单类型" align="center">
          <template slot-scope="scope">
            <el-tag type="success" size="small" v-if="scope.row.menuType==1">目录</el-tag>
            <el-tag type="warning" size="small" v-if="scope.row.menuType==2">菜单</el-tag>
            <el-tag type="danger" size="small" v-if="scope.row.menuType==3">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="icon" label="icon" align="center">
          <template slot-scope="scope">
            <i v-if="scope.row.icon" :class="[scope.row.icon,'iconfont']" style="font-size:20px"></i>
            <span v-else>-- --</span>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="前端路由" align="center" />
        <el-table-column prop="permission" label="权限标识" align="center">
          <template slot-scope="scope">
            <el-tag type="danger" size="small" v-if="scope.row.permission">{{scope.row.permission}}</el-tag>
            <span v-else>-- --</span>
          </template>
        </el-table-column>
        <el-table-column prop="hidden" label="是否隐藏" align="center">
          <template slot-scope="scope">
            <el-switch @change="switchChange(scope.row)" v-model="scope.row.hidden" :active-value="1" :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <perbtn @click="showModel('details',scope.row.id)" type="text" perms="menu:details">查看</perbtn>
            <el-divider direction="vertical"></el-divider>
            <perbtn @click="showModel('edit',scope.row.id)" type="text" perms="menu:edit">编辑</perbtn>
            <el-divider direction="vertical"></el-divider>
            <perbtn @click="deleteRow(scope.row.id)" type="text" perms="menu:delete">删除</perbtn>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <model ref="model" v-model="isOpen" @fetchData="fetchData"></model>
  </div>
</template>

<script>
import model from './model.vue'
import view from '@/mixins/view'
import { export2Excel } from '@/utils/index'
import perbtn from '@/components/perbtn'

export default {
  mixins: [view],
  data () {
    return {
      api: this.$api.menu
    }
  },
  components: {
    model,
    perbtn
  },
  methods: {
    // 开关改变
    async switchChange (row) {
      const rowResult = await this.$http.put(`${this.api}/${row.id}`, { hidden: row.hidden })
      this.$message({
        type: 'success',
        message: rowResult.msg
      })
      this.fetchData()
    },
    // 获取数据
    async fetchData () {
      this.tableData = []
      const result = await this.$http.get(this.api)
      this.tableData = result.data.rows || []
      this.count = result.data.count || 0
    },
    // 数据导出
    exportExcel () {
      const columens = [
        {
          title: '菜单名称',
          key: 'menuName',
        },
        {
          title: '菜单类型',
          key: 'menuType',
        },
        {
          title: '前端路由',
          key: 'path',
        },
      ]
      export2Excel(columens, this.tableData)
    }
  },

  created () {
    this.fetchData()
  },

}
</script>

<style lang="scss" scoped>
.seachForm {
  transition: 0.5s all;
  overflow: hidden;
}
.searchShow {
  height: 100px;
}
.searchHidden {
  height: 0;
}
</style>
